<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="getbtn">GET</button>
    <button id="postbtn">POST</button>
    <button id="putbtn">PUT</button>


    https://baidu.com/hehehe

    res.send('hehehe("zs", 18)')


    <script>

      function hehehe(name, age) {
        console.log('接收到数据后，做你想做的事情....');
      }
    </script>


    <!-- script  天然支持跨域 -->
    <!-- 把响应的结果，自动当做JS去执行 -->
    <!-- 事先定义一个全局函数，服务端返回这个函数的调用即可   sayHi -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="https://baidu.com/hehehe"></script>

    <script>
      hehehe("zs", 18);
    </script>
    <script>
      (() => {
        document.querySelector('#getbtn').addEventListener('click', () => {
          axios({
            method: 'get',
            url: 'http://localhost/api/get',
              headers: {
                hehe: '123',
              },
            // 请求体数据
            // data: {}
            // 查询参数
            params: {
              name: 'zs',
              age: 18,
            },
          })
            .then((res) => {
              console.log(res, 'res');
            })
            .catch((err) => {
              console.log(err, 'err');
            });
        });
        document.querySelector('#postbtn').addEventListener('click', () => {
          axios({
            method: 'POST',
            url: 'http://localhost/api/post',
            data: {
              name: 'ls',
              age: 20,
            },
          })
            .then((res) => {
              console.log(res, 'res');
            })
            .catch((err) => {
              console.log(err, 'err');
            });
        });

        document.querySelector('#putbtn').addEventListener('click', () => {
          axios({
            method: 'put',
            url: 'http://localhost/api/put',
          })
            .then((res) => {
              console.log(res, 'res');
            })
            .catch((err) => {
              console.log(err, 'err');
            });
        });
      })();
    </script>
  </body>
</html>
